<template>
  <div id="deatails">
    <my-header></my-header>
    <div id="head">
      <router-link to="/">首页 ></router-link>
      <router-link to="/wrindex">结婚商城 ></router-link>
      <span>商家精选套餐</span>
    </div>
    <div class="mid">
      <ul class="mid_title">
        <li v-for="(item, i) in iname" :key="i">
          <span @click="sShop(i)" :class="{ best1: active == i }">
            {{ item.iname }}
          </span>
        </li>
      </ul>
      <!-- <div style="clear: both;"></div> -->
      <div class="mid_table">
        <div>
          <span>排序：</span>
          <span @click="pxG" id="px">价格从低到高</span>
          <span @click="pxD" id="px">价格从高到低</span>
          <div>
            <div class="mid_table_btn"><i>¥</i><input type="text" /></div>
            <i>-</i>
            <div class="mid_table_btn"><i>¥</i><input type="text" /></div>
            <button>确定</button>
          </div>
        </div>
      </div>
    </div>
    <div class="foot">
      <div
        class="foot_left"
        v-for="(item, i) in inShop"
        :key="i"
        v-show="active == i"
      >
        <div class="left_div" v-for="(initem, index) in item" :key="index">
          <img :src="initem.img" />
          <div class="foot_left_title">
            <router-link :to="`in_shop?tid=${initem.sid}`"
              ><h3>{{ initem.title }}</h3></router-link
            >
            <div style="margin-top: 10px">
              <span class="left_span1"
                >{{ initem.place }} | {{ initem.inShop }}</span
              >
            </div>
            <div id="left_span">
              <span class="left_span2">咨询礼</span>
              <span class="left_span2">到店礼</span>
              <span class="left_span2">订单礼</span>
              <span class="left_span2">花呗分期</span>
            </div>
            <div class="left_jlt">
              <i class="iconfont icon-star"></i>
              <i class="iconfont icon-star"></i>
              <i class="iconfont icon-star"></i>
              <i class="iconfont icon-star"></i>
              <i class="iconfont icon-star"></i>
              <span>137条</span>
              <span>100%好评</span>
            </div>
            <div class="left_price">
              <span>¥</span><span>{{ initem.price }}</span
              ><span>¥{{ initem.price1 }}</span>
            </div>
            <button type="text" @click="openMsg">
              询问低价<i class="el-icon-right"></i>
            </button>
          </div>
        </div>
        <div style="clear: both"></div>
      </div>
      <FootRight></FootRight>
    </div>
    <div class="out_shop">
      <p>优质商家推荐</p>
      <div>
        <router-link to="">
          <img
            src="https://qnm.hunliji.com/CFAFD9FD1A025CE54DE821B438AA421E.jpg"
            alt=""
          />
          <div class="shop_t">
            <p>晶莹婚礼</p>
            <div>
              <span>370评价</span>
              <span>100%好评</span>
            </div>
          </div>
        </router-link>
      </div>
      <div>
        <router-link to="">
          <img
            src="https://qnm.hunliji.com/EBAE88288F3B974838C3EAB82256796F.jpg"
            alt=""
          />
          <div class="shop_t">
            <p>SVT斯维汀高端宴会设计</p>
            <div>
              <span>370评价</span>
              <span>100%好评</span>
            </div>
          </div>
        </router-link>
      </div>
      <div>
        <router-link to="">
          <img
            src="https://qnm.hunliji.com/FsPDo5TfXJG7tDKUAC8A47dqKDL_"
            alt=""
          />
          <div class="shop_t">
            <p>LAN婚礼</p>
            <div>
              <span>370评价</span>
              <span>100%好评</span>
            </div>
          </div>
        </router-link>
      </div>
      <div>
        <router-link to="">
          <img
            src="https://qnm.hunliji.com/Flct-trERbfzJCr7ysXYhgfzLuZ9"
            alt=""
          />
          <div class="shop_t">
            <p>DG梦想花园婚礼企划</p>
            <div>
              <span>370评价</span>
              <span>100%好评</span>
            </div>
          </div>
        </router-link>
      </div>
      <div>
        <router-link to="">
          <img
            src="https://qnm.hunliji.com/24BCC8AE4120934957A6C7C1DB9CD052.jpg"
            alt=""
          />
          <div class="shop_t">
            <p>安琪拉婚礼会馆</p>
            <div>
              <span>370评价</span>
              <span>100%好评</span>
            </div>
          </div>
        </router-link>
      </div>
    </div>
    <div style="clear: both; margin-bottom: 100px"></div>
    <my-footer></my-footer>
  </div>
</template>
<script>
import FootRight from "./FootRight.vue";
export default {
  components: { FootRight },
  data() {
    return {
      inShop: [],
      arr2: [],
      inImg: [],
      active: 0,
      iname: [],
    };
  },
  mounted() {
    this.axios.get("/in_shop_name").then((res1) => {
      this.axios.get("/in_shop").then((res2) => {
        this.iname = res1.data;
        this.arr2 = res2.data;
        // console.log(this.iname,this.arr2)
        var i = 0;
        this.iname.forEach((item) => {
          var arr = [];
          var m = 0;
          this.arr2.forEach((items) => {
            if (items.iname == item.iname && m < 4) {
              arr.push(items);
              m++;
            }
          });
          this.inShop[i] = arr;
          i++;
          // console.log(this.inShop)
        });
      });
    });
  },
  methods: {
    sShop(i) {
      this.active = i;
    },
    pxG() {
      // console.log(this.inShop)
      this.inShop.forEach((item) => {
        item.sort((a, b) => {
          return a.price - b.price;
        });
      });
      this.$forceUpdate()
    },
    pxD() {
      this.inShop.forEach((item) => {
        item.sort((a, b) => {
          return b.price - a.price; 
        });
      });
      this.$forceUpdate()
    },
    openMsg() {
      if(JSON.parse(sessionStorage.getItem("is_login"))){
        this.$alert("您已登录,稍后会有工作人员联系您", "登陆成功", {
        confirmButtonText: "确定",
      });
      }else{
         this.$router.push({
          path:'/login'
        })
      }     
    },
  },
};
</script>
<style scoped>
.best1{
  color: rgb(248, 50, 68);
  background-color: rgb(255, 255, 255);
  box-shadow: 0px 8px 28px rgba(0, 0, 0, 0.1);
  border-radius:5px 5px 0 0;
  border-bottom: 2px solid rgb(248, 50, 68);
}
img:hover{
  opacity: 0.8;
}
#px:hover{
  cursor: pointer;
}
#head {
  width: 1200px;
  height: 52px;
  margin: 0 auto;
  line-height: 52px;
}

#head a {
  text-decoration: none;
  font-size: 12px;
  color: #999;
}

#head a:hover {
  color: #f83244;
}

#head span {
  font-size: 12px;
  color: #666;
}

.mid {
  width: 1200px;
  margin: 0 auto;
  box-shadow: 0px 8px 28px rgba(0, 0, 0, 0.15);
}

.mid ul li {
  float: left;
  /* width: 120px; */
  /* height: 52px; */
  background-color: #f5f5f5;
  border-radius: 2px;
}

.mid ul {
  height: 52px;
}

.mid ul li span {
  width: 150px;
  height: 52px;
  display: block;
  line-height: 52px;
  text-align: center;
  font-size: 14px;
  cursor: pointer;
}

.mid ul li span:hover {
  color: rgb(248, 50, 68);
  background-color: rgb(255, 255, 255);
  box-shadow: 0px 8px 28px rgba(0, 0, 0, 0.1);
  border-bottom: 2px solid rgb(248, 50, 68);
}

.mid_table > div {
  width: 1120px;
  height: 66px;
  margin: 0 40px;
  border-bottom: 1px dashed #ddd;
}

.mid_table div span {
  font-size: 14px;
  color: #666;
  line-height: 66px;
  margin-right: 20px;
}

.mid_table div div {
  display: inline-block;
}

.mid_table div #px {
  text-decoration: none;
  margin-right: 40px;
  font-size: 14px;
  color: #333;
}

.mid_table div a:hover {
  color: #f83244;
}

.mid_table_btn {
  border: 1px solid #e8e8e8;
  width: 60px;
  padding: 0 7px;
  position: relative;
  height: 24px;
}

.mid_table div i {
  font-style: normal;
  font-size: 14px;
  color: #666;
}

.mid_table div input {
  position: relative;
  outline: none;
  width: 35px;
  border: none;
  bottom: 2px;
  left: 5px;
}

.mid_table div button {
  width: 56px;
  height: 25px;
  border: none;
  background-color: #f83244;
  color: #fff;
  line-height: 25px;
  margin-left: 11px;
  outline: none;
  position: relative;
  bottom: 1px;
}

.foot {
  width: 1200px;
  margin: 0 auto;
  margin-top: 40px;
  display: flex;
  justify-content: space-between;
}

.left_div {
  width: 820px;
  height: 208px;
  padding-bottom: 30px;
  margin-top: 20px;
  border-bottom: 1px solid #e8e8e8;
}

.foot_left_title {
  float: right;
  display: block;
  position: relative;
  width: 458px;
  height: 208px;
}

.foot_left_title > a {
  text-decoration: none;
  color: #333;
  font-size: 18px;
}

.left_div > img {
  width: 332px;
  height: 208px;
}

.left_div > img:first-child:hover,
button:hover {
  opacity: 0.85;
  cursor: pointer;
}

.foot_left_title > a:first-child:hover {
  color: #f83244;
}

.left_span1 {
  font-size: 14px;
  color: #333;
}

.left_span2 {
  background-color: #fff1f6;
  border-radius: 2px;
  font-size: 12px;
  padding: 0 4px 2px;
  color: #f83244;
  margin-right: 6px;
}

#left_span {
  margin-top: 14px;
  margin-bottom: 12px;
}

#left_span > span:last-child {
  color: #13acec;
  background-color: #eff7ff;
}

.left_jlt > span {
  font-size: 14px;
  color: #666;
  margin-left: 6px;
  margin-right: 15px;
}

.left_jlt > i {
  color: #ffa800;
  font-size: 14px;
}

.left_price {
  position: absolute;
  left: 0;
  bottom: 0;
}

.left_price > span:nth-child(2) {
  color: #f83244;
  font-weight: bold;
  font-size: 28px;
}

.left_price > span:first-child {
  font-weight: bold;
  color: #f83244;
}

.left_price > span:last-child {
  color: #999;
  font-size: 12px;
  margin-left: 10px;
  text-decoration: line-through;
}

.foot_left_title > button {
  font-size: 16px;
  position: absolute;
  width: 160px;
  height: 48px;
  right: 0;
  bottom: 0;
  color: #fff;
  background-color: #f83244;
  text-align: center;
  line-height: 48px;
  border-radius: 24px;
  border: none;
  box-shadow: 0px 16px 24px rgba(248, 50, 68, 0.2);
}

.foot_left_title > button:focus {
  outline: none;
}

.foot_left_title > button > i {
  margin-left: 5px;
}

.foot_right,
.foot_left {
  float: left;
}

.out_shop {
  width: 1200px;
  margin: 0 auto;
  margin-top: 50px;
}

.out_shop > div {
  float: left;
  box-shadow: 0px 8px 28px rgba(0, 0, 0, 0.15);
}

.out_shop > div:not(:last-child) {
  margin-right: 5px;
}

.out_shop img {
  width: 224px;
  height: 224px;
}

.out_shop > p {
  font-size: 24px;
  margin-bottom: 20px;
}

.shop_t {
  padding: 12px 20px;
}

.shop_t > p {
  color: #000;
  font-size: 14px;
}

.shop_t > div > span:first-child,
.shop_t > div > span:last-child {
  font-size: 12px;
}

.shop_t > div > span:last-child {
  margin-left: 80px;
}
</style>